﻿@model Himall.Web.Models.ChartDataViewModel
@{
    ViewBag.Title = "Member";
}
<div class="container">
    <ul class="nav nav-tabs-custom clearfix">
        <strong>会员统计</strong>
        <li class="active"><a>新增会员</a></li>
        <li><a href="./OrderAreaMap">区域分析</a></li>
        <em class="primary-btn">
            <span class="glyphicon glyphicon-question-sign"></span>
            <div class="primary">
                <h3>温馨提示：</h3>
                <span>*</span><p>可查看平台会员统计数据，显示当月和上月的数据对比</p>
            </div>
        </em>
    </ul>
    <form class="custom-inline count-search">
        <div class="form-group">
            @Html.DropDownList("year", (List<SelectListItem>)ViewBag.YearDrop, new { @class = "form-control input-sm" })
        </div>
        <div class="form-group">
            @Html.DropDownList("month", (List<SelectListItem>)ViewBag.MonthDrop, new { @class = "form-control input-sm" })
        </div>

        <input type="button" class="btn btn-primary btn-sm" id="SearchBtn" value="查询" />
    </form>
    <div class="count">
        <div class="text-right form-group">
            <div class="count-chat">
                <div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
            </div>
            <table class="table table-bordered table-primary">
                <tbody>
                    <tr class="info">
                        <td><span id="thisMonthName">上架商品数</span>：<b id="thisMonthCount">9</b>个</td>
                        <td><span id="prevMonthName">上架商品数</span>：<b id="prevMonthCount">9</b>个</td>
                    </tr>
                </tbody>
            </table>
        </div>



    </div>
</div>




<script src="~/Scripts/echarts-plain-map.js"></script>
<script src="~/Scripts/CommonJS.js"></script>
<script type="text/javascript">
$(function(){
    var loadingTicket;
    var myChart;
    option = {
        tooltip: {
            trigger: 'axis',
            formatter: function (params, ticket, callback) {
                var t1 = params[0][0].replace('月', '月' + params[0][1] + '号') + '  :  <b style="color:yellow;font-size:14px;">' + params[0][2] + '</b>  人';
                var t2 = params[1][0].replace('月', '月' + params[1][1] + '号') + '  :  <b style="color:yellow;font-size:14px;">' + params[1][2] + '</b>  人';
                var html = ['<div style="text-align:left;">', t1, '<br />', t2, '</div>'];

                return html.join('');
            }
        },
        legend: {
            data: ['@Model.SeriesData[0].Name', '@Model.SeriesData[1].Name']
        },
        toolbox: {
            show: true,
            feature: {
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        calculable: true,
        xAxis: [
            {
                type: 'category',
                data: [@Html.Raw(Model.xAxis.TrimEnd(','))]
            }
        ],
        yAxis: [
            {
                type: 'value',
                axisLabel: {
                    formatter: '{value} 人'
                },
                splitArea: { show: true }
            }
        ],
        series: [
            {
                name: '@Model.SeriesData[0].Name',
                type: 'line',
                data: [@Html.Raw(Model.SeriesData[0].SeriesData.TrimEnd(','))],
                smooth: true,
                symbol: 'emptyCircle',
                markPoint: {
                    data: [
                        { type: 'max', name: '最多人数' },
                        { type: 'min', name: '最少人数' }
                    ]
                },
                markLine: {
                    data: [
                        { type: 'average', name: '平均值' }
                    ]
                }
            },
            {
                name: '@Model.SeriesData[1].Name',
                type: 'line',
                data: [@Html.Raw(Model.SeriesData[1].SeriesData.TrimEnd(','))],
                smooth: true,
                symbol: 'emptyCircle',
                markPoint: {
                    data: [
                        { type: 'max', name: '最多人数' },
                        { type: 'min', name: '最少人数' }
                    ]
                },
                markLine: {
                    data: [
                        { type: 'average', name: '平均值' }
                    ]
                }
            }
        ]
    };

	require.config({
		paths: {
			echarts: '/Scripts'
		}
	});
	require(
		[
			'echarts',
			'echarts/chart/bar',
			'echarts/chart/line',
			'echarts/chart/map'
		],
		load
	);
	
	function load(echarts){
		$("#thisMonthName").text(option.series[0].name);
		$("#prevMonthName").text(option.series[1].name);
		var sum = 0;
		for (var i = 0; i < option.series[0].data.length; i++) {
			sum += option.series[0].data[i];
		}
		$("#thisMonthCount").text(sum);

		sum = 0;
		for (var i = 0; i < option.series[1].data.length; i++) {
			sum += option.series[1].data[i];
		}
		$("#prevMonthCount").text(sum);

		myChart = echarts.init(document.getElementById('main'));
		myChart.showLoading({
			text: '正在加载图表...',
			effect: 'bubble',
			textStyle: {
				fontSize: 20
			}
		});
		clearTimeout(loadingTicket);
		loadingTicket = setTimeout(function () {
			myChart.hideLoading();
			myChart.setOption(option);
		}, 500);
		
		$("#SearchBtn").click(function () {
			//(new function (editor.doc.getValue()))();
			if (myChart && myChart.dispose) {
				myChart.dispose();
			}

			var loading = showLoading();
			ajaxRequest({
				type: 'GET',
				url: "./GetMemberChartByMonth",
				param: { year: $("#year").val(), month: $("#month").val() },
				dataType: "json",
				success: function (data) {
				    loading.close();
					if (data.successful == true) {
						option.legend.data = [data.chart.SeriesData[0].Name, data.chart.SeriesData[1].Name];
						option.xAxis.data = data.chart.XAxisData;
						option.series[0].name = data.chart.SeriesData[0].Name;
						option.series[0].data = data.chart.SeriesData[0].Data;
						option.series[1].name = data.chart.SeriesData[1].Name;
						option.series[1].data = data.chart.SeriesData[1].Data;
							
						load(echarts);
					}
				}, error: function () {
				    loading.close();
				}
			});
		});
	}
	

    
});

</script>
